<script setup lang="ts">
const message = useMessage();
window.$message = message;
</script>

<template>
  <n-layout class="wh-screen min-w-800px bg-gray-100" has-sider>
    <n-layout-sider
      class="p-2 rounded-lg"
      bordered
      show-trigger
      collapse-mode="width"
      :collapsed-width="80"
      :width="240"
    >
      <SideBar />
    </n-layout-sider>
    <n-layout class="m-2 bg-gray-100">
      <n-layout-header
        class="p-2 mb-2 bg-light-100 rounded-lg shadow-sm sticky top-0 z-100"
      >
        <Header />
      </n-layout-header>
      <n-layout-content class="p-4 bg-light-100 rounded-lg shadow-sm">
        <router-view />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped lang="scss"></style>
